<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <title>ShiPing</title>
    <meta name="description" content=""/>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="__STATIC__/css/vant.css">

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="__STATIC__/js/vue.min.js"></script>
    <script src="__STATIC__/js/vant.min.js"></script>
    <style>
        body{
            background: #f2f2f2;
        }
        .loading{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(1, 2, 2, 0.52);
            z-index: 10000;
        }
        .van-loading{
            color: #e23cbf;
            font-size: 0;
            text-align: center;
            position: relative;
            top: 46%;
        }
        .van-tabs__content{
            padding: 1px 4px;
            background: #f2f2f2;
            margin-top: 90px;
        }
        .card-item{
            margin: 10px 0;
        }
        .van-card{
            background-color: white;
            border-right: 3px;
            box-shadow: 0 0 10px 2px white;
        }
        .header{
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 999;
        }
        .van-tabs__wrap{
            height: 44px;
            position: fixed;
            top: 50px;
            z-index: 999;
            width: 100%;
        }
        .sc-div{
            height: 85vh;
            overflow: hidden;
            overflow-y: scroll;
        }
        .extra-info{
            color: #7d7e80;
        }
        .top-content{
            display: flex;
            justify-content: flex-start;
            padding: 0px 10px;
            align-items: center;
        }
        .img-contain{
            margin-right: 20px;
        }
        .img-contain img{
            width: 120px;
            height: auto;
        }
        .top-des{
            font-size: 15px;
            width: 210px;
            overflow: hidden;
            overflow-wrap: break-word;
        }
    </style>
</head>
<body>
<div class="main" id="app">
    <div class="loading" v-if="showLoading">
        <van-loading type="spinner" color="#1989fa" />
    </div>
    <div class="header">
        <van-search show-action v-model="keyword" placeholder="Enter keyword..." show-action @search="search">
            <div slot="action" @click="search">search</div>
        </van-search>
    </div>

    <van-tabs  @click="onClick">
        <van-tab title="All">
            <div class="sc-div" @scroll="scr()">
                <div class="card-item" v-for="(item, index) in list"  @click="pull_detail(item)" :key="index">
                    <van-card tag="Hot"  :price="item.commission" :desc="'remark: '+item.remark" :title="'Product: '+item.product_name" :thumb="item.product_image">
                        <div slot="tags">
                           <span class="extra-info">Shop: {{ item.shop_name }}</span>
                        </div>
                    </van-card>
                </div>
            </div>
        </van-tab>
        <van-tab v-for="(i, index) in categories" :title="i.name" :name="i.id" :key="index">
            <div class="sc-div" @scroll="scr()">
                <div class="card-item" v-for="(item, index) in list"  @click="pull_detail(item)" :key="index">
                    <van-card tag="Hot"  :price="item.commission" :desc="'remark: '+item.remark" :title="'Product: '+item.product_name" :thumb="item.product_image">
                        <div slot="tags">
                            <span class="extra-info">Shop: {{ item.shop_name }}</span>
                        </div>
                    </van-card>
                </div>
            </div>
        </van-tab>
    </van-tabs>
    <van-popup v-model="show" closeable position="bottom" :style="{ height: '60%' }">
        <div class="detail">
            <h4 style="margin: 10px 15px">Product</h4>
            <div class="top-content">
                <div class="img-contain">
                    <img :src="detail.product_image" @click="prev(detail.product_image)" alt="">
                </div>
                <div class="top-des">
                    <p>Product: <b>{{ detail.product_name }}</b></p>
                    <p>Category: {{ detail.category }}</p>
                    <p>Commission: <span style="color: red;">{{ detail.commission_type }}{{ detail.commission }}</span></p>
                </div>
            </div>
            <h4 style="margin: 10px 15px">Shop</h4>
            <div class="top-content">
                <div class="img-contain">
                    <img :src="detail.shop_image" @click="prev(detail.shop_image)" alt="">
                </div>
                <div class="top-des">
                    <p>Shop: <b>{{ detail.shop_name }}</b></p>
                    <p>Publish: {{ detail.create_time }}</p>
                    <p>Remark: {{ detail.remark }}</p>
                </div>
            </div>
        </div>
    </van-popup>
</div>
<script src="__STATIC__/js/jquery-3.4.1.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            show: false,
            active: 0,
            buttonSize: 'middle',
            nScrollHight: 0,
            nScrollTop: 0,
            page: 1,
            list: [],
            categories: [],
            hasNext: true,
            showLoading: false,
            detail: {},
            keyword: '',
            category_id: ''
        },
        created() {
            this.onLoad();
            this.getCategories();
        },
        methods: {
            prev(url) {
              console.log(url);
                vant.ImagePreview({
                    images: [url],
                    startPosition: 0
                });
            },
            onClick(name, title) {
                console.log(name);
                var this_ = this;
                this_.page = 1;
                this_.category_id = name;
                this_.getList(function (res) {
                    if (res.code == 1) {
                        this_.showLoading = false;
                        if (res.data.current_page == res.data.last_page) {
                            this_.hasNext = false;
                        }else {
                            this_.hasNext = true;
                        }
                        this_.list = res.data.data;
                    } else {
                    }
                })
            },
            isMobile() {
                var userAgentInfo = navigator.userAgent;

                var mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];

                var mobile_flag = false;

                //根据userAgent判断是否是手机
                for (var v = 0; v < mobileAgents.length; v++) {
                    if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
                        mobile_flag = true;
                        break;
                    }
                }
                var screen_width = window.screen.width;
                var screen_height = window.screen.height;

                //根据屏幕分辨率判断是否是手机
                if (screen_width < 500 && screen_height < 800) {
                    mobile_flag = true;
                }

                return mobile_flag;
            },
            cate(id) {
                console.log(id)
                var this_ = this;
                this_.page = 1;
                this_.category_id = id;
                this_.getList(function (res) {
                    if (res.code == 1) {
                        this_.showLoading = false;
                        if (res.data.current_page == res.data.last_page) {
                            this_.hasNext = false;
                        }else {
                            this_.hasNext = true;
                        }
                        this_.list = res.data.data;
                    } else {
                    }
                })
            },
            search() {
                var this_ = this;
                this_.page = 1;
                this_.getList(function (res) {
                    if (res.code == 1) {
                        this_.showLoading = false;
                        if (res.data.current_page == res.data.last_page) {
                            this_.hasNext = false;
                        }else {
                            this_.hasNext = true;
                        }
                        this_.list = res.data.data;
                    } else {
                    }
                })
            },
            pull_detail(detail) {
                console.log(detail);
                this.detail = detail;
                this.show = true
            },
            scr() {
                var this_ = this;
                this_.$nextTick(() => {
                    const el = document.querySelector('.sc-div');
                    const offsetHeight = el.offsetHeight;
                    el.onscroll = () => {
                        const scrollTop = el.scrollTop;
                        const scrollHeight = el.scrollHeight;
                        if ((offsetHeight + scrollTop) - scrollHeight >= 0) {
                            // 需要执行的代码
                            this.page += 1;
                            if (this_.hasNext) {
                                this_.getList(function (res) {
                                    if (res.code == 1) {
                                        this_.showLoading = false;
                                        if (res.data.current_page == res.data.last_page) {
                                            this_.hasNext = false;
                                        }
                                        this_.list = this_.list.concat(res.data.data);
                                    } else {
                                    }

                                })
                            }
                        }
                    };
                });
            },
            getCategories() {
                var this_ = this;
                $.ajax({
                    url: '/api/ceping/index/get_categories',
                    method: 'GET',
                    dataType: 'JSON',
                    data: {},
                    success: function (res) {
                        this_.categories = res.data;
                    },
                    fail: function (res) {
                        console.log(res);
                    }
                })
            },
            onLoad: function () {
                var this_ = this;
                if (!this_.isMobile()) {
                    location.href = '/index'
                }
                this_.getList(function (res) {
                    console.log(res);
                    if (res.code == 1) {
                        this_.showLoading = false;
                        this_.list = res.data.data;
                        if (res.data.last_page == 1) {
                            this_.hasNext = false;
                        }
                    } else {
                    }
                })
            },
            getList(callback) {
                var this_ = this;
                this_.showLoading = true;
                $.ajax({
                    url: '/api/ceping/index',
                    method: 'GET',
                    dataType: 'JSON',
                    data: {'page': this_.page, 'keyword': this_.keyword, 'category_id': this_.category_id},
                    success: function (res) {
                        callback(res)
                    },
                    fail: function (res) {
                        this_.$toast.fail('网络异常！');
                        console.log(res);
                    }
                })
            }
        }
    });
</script>

</body>
</html>
